<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | ChartJS</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}">
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic}">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div th:replace="@{/include/back_header}::header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="@{/include/back_sidebar}::sidebar"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                首页
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- /.col (LEFT) -->
                <div class="col-md-6">

                    <!-- BAR CHART -->
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <h3 class="box-title">各类商品的种数</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="chart">
                                <canvas id="barChart" ></canvas>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                </div>
                <!-- /.col (RIGHT) -->
                <div class="col-md-6">
                    <!-- LINE CHART -->
                    <div class="box box-danger">
                        <div class="box-header with-border">
                            <h3 class="box-title">各类商品的库存</h3>

                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                </button>
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <canvas id="pieChart" ></canvas>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                </div>
            </div>
            <!-- /.row -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:replace="@{/include/back_footer}::footer"></div>
</div>
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/adminlte/bower_components/chart.js/Chart.js}"></script>
<script th:src="@{/adminlte/bower_components/fastclick/lib/fastclick.js}"></script>
<script th:src="@{/adminlte/dist/js/adminlte.min.js}"></script>
<script th:src="@{/adminlte/dist/js/demo.js}"></script>
<script th:src="@{https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js}"></script>
<script th:src="@{https://oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        $("#firstpage").addClass("active");
        var label=[[${lables}]].split(",");
        var datas=[[${datas}]].split(",");
        var inventory=[[${inventory}]].split(",");
        console.log(inventory);
        var barChartData = {
            labels  : label,
            datasets: [
                {
                    fillColor           : 'rgba(60,141,188,0.9)',
                    strokeColor         : 'rgba(60,141,188,0.8)',
                    pointColor          : '#3b8bba',
                    pointStrokeColor    : 'rgba(60,141,188,1)',
                    pointHighlightFill  : '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data                : datas,
                    label               : '商品种类'
                }
            ]
        }

        var pieChartData=new Array();
        for (var i=0;i<label.length;i++){
            var red = parseInt(Math.random()*257).toString(16);
            var blue = parseInt(Math.random()*257).toString(16);
            var green= parseInt(Math.random()*257).toString(16);
            var color = '#'+red+blue+green;
            pieChartData.push({
                label:label[i],
                value:inventory[i],
                color:color,
                highlight:color
            })
            console.log(color);
        }
        var pieOptions     = {
            //Boolean - Whether we should show a stroke on each segment
            segmentShowStroke    : true,
            //String - The colour of each segment stroke
            segmentStrokeColor   : '#fff',
            //Number - The width of each segment stroke
            segmentStrokeWidth   : 2,
            //Number - The percentage of the chart that we cut out of the middle
            percentageInnerCutout: 50, // This is 0 for Pie charts
            //Number - Amount of animation steps
            animationSteps       : 100,
            //String - Animation easing effect
            animationEasing      : 'easeOutBounce',
            //Boolean - Whether we animate the rotation of the Doughnut
            animateRotate        : true,
            //Boolean - Whether we animate scaling the Doughnut from the centre
            animateScale         : false,
            //Boolean - whether to make the chart responsive to window resizing
            responsive           : true,
            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
            maintainAspectRatio  : true,
            //String - A legend template
            // legendTemplate       : '<ul th:class="${name.toLowerCase()-legend}"><li th:each="i : ${#numbers.sequence(0,segments.length)}"><span th:style="${background-color:segments[i].fillColor}"></span><span th:if="${segments[i].label!=null}"><a th:text="${segments[i].label}"></a></span></li></ul>'
        }
        var barChartOptions                  = {
            //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
            scaleBeginAtZero        : true,
            //Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines      : true,
            //String - Colour of the grid lines
            scaleGridLineColor      : 'rgba(0,0,0,.05)',
            //Number - Width of the grid lines
            scaleGridLineWidth      : 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines  : true,
            //Boolean - If there is a stroke on each bar
            barShowStroke           : true,
            //Number - Pixel width of the bar stroke
            barStrokeWidth          : 2,
            //Number - Spacing between each of the X value sets
            barValueSpacing         : 5,
            //Number - Spacing between data sets within X values
            barDatasetSpacing       : 1,
            //String - A legend template
            //Boolean - whether to make the chart responsive
            responsive              : true,
            maintainAspectRatio     : true,
        }
        var barChartCanvas                   = $('#barChart').get(0).getContext('2d');
        var barChart                         = new Chart(barChartCanvas);
        barChart.Bar(barChartData, barChartOptions);

        var pieChartCanvas = $('#pieChart').get(0).getContext('2d');
        var pieChart       = new Chart(pieChartCanvas);
        pieChart.Doughnut(pieChartData,pieOptions);
    })

    $(".sidebar-menu li").click(function (e) {
        $(".sidebar-menu li").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>
